<template>
        <el-container>
             <el-header>
                <f-header/>
            </el-header>
        <!-- 外层容器全部子元素会垂直上下排列， 否则会水平左右排列。 -->
        <el-container>
            <el-aside :width="$store.state.asideWidth">
                <f-menu></f-menu>
            </el-aside>
            <el-main>
                <f-tag-list/>
                <router-view v-slot="{ Component }">
                    <!-- 最久未访问会重新加载数据 -->
                    <transition name="fade">
                        <keep-alive :max="10">
                            <component :is="Component"></component>
                        </keep-alive>
                    </transition>
                    
                 
                </router-view>
            </el-main>
        </el-container>
        </el-container>
   
</template>

<script setup>
import FHeader from './components/FHeader.vue';
import FMenu from './components/FMenu.vue';
import FTagList from './components/FTagList.vue';
</script>
<style>
/* 淡入淡出动画 */
    .el-aside{
        transition:all 0.2s;
    }
    /* 进入之前 */
    .fade-enter-from{
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
    }
    /* 进入之后 */
    .fade-enter-to{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

    }
    .fade-leave-from{
        opacity: 1;
    }
    .fade-leave-to{
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
    }
    .fade-enter-active,
    .fade-leave-active{
        transition: all 0.3s;
    }
    .fade-enter-active{
        transition-delay:0.3s;
    }
</style>